import React from 'react';
import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
interface PaginationProps {
  currentPage: number;
  totalPages: number;
  onPageChange: (page: number) => void;
}
export const Pagination = ({
  currentPage,
  totalPages,
  onPageChange
}: PaginationProps) => {
  // Generate an array of page numbers to display
  const getPageNumbers = () => {
    const pageNumbers = [];
    const maxPagesToShow = 5;
    if (totalPages <= maxPagesToShow) {
      // If we have 5 or fewer pages, show all page numbers
      for (let i = 1; i <= totalPages; i++) {
        pageNumbers.push(i);
      }
    } else {
      // Always include first page
      pageNumbers.push(1);
      // Calculate start and end of page numbers to show
      let start = Math.max(2, currentPage - 1);
      let end = Math.min(totalPages - 1, currentPage + 1);
      // Adjust if at the start or end
      if (currentPage <= 2) {
        end = 4;
      } else if (currentPage >= totalPages - 1) {
        start = totalPages - 3;
      }
      // Add ellipsis if needed before middle pages
      if (start > 2) {
        pageNumbers.push('...');
      }
      // Add middle pages
      for (let i = start; i <= end; i++) {
        pageNumbers.push(i);
      }
      // Add ellipsis if needed after middle pages
      if (end < totalPages - 1) {
        pageNumbers.push('...');
      }
      // Always include last page
      if (totalPages > 1) {
        pageNumbers.push(totalPages);
      }
    }
    return pageNumbers;
  };
  return <div className="flex justify-center mt-8">
      <nav className="flex items-center">
        <button onClick={() => currentPage > 1 && onPageChange(currentPage - 1)} disabled={currentPage === 1} className={`flex items-center px-3 py-2 rounded-l-md border ${currentPage === 1 ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white text-gray-700 hover:bg-gray-50'}`}>
          <ChevronLeftIcon size={16} />
          <span className="ml-1">Previous</span>
        </button>
        <div className="flex">
          {getPageNumbers().map((page, index) => page === '...' ? <span key={`ellipsis-${index}`} className="px-3 py-2 border-t border-b text-gray-500">
                ...
              </span> : <button key={`page-${page}`} onClick={() => typeof page === 'number' && onPageChange(page)} className={`px-3 py-2 border-t border-b ${currentPage === page ? 'bg-terracotta text-white font-medium border-terracotta' : 'bg-white text-gray-700 hover:bg-gray-50'}`}>
                {page}
              </button>)}
        </div>
        <button onClick={() => currentPage < totalPages && onPageChange(currentPage + 1)} disabled={currentPage === totalPages} className={`flex items-center px-3 py-2 rounded-r-md border ${currentPage === totalPages ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white text-gray-700 hover:bg-gray-50'}`}>
          <span className="mr-1">Next</span>
          <ChevronRightIcon size={16} />
        </button>
      </nav>
    </div>;
};